<template>
	<view>
		<view class="body">
			<view class="title">{{kbs.title}}</view>
			<view class="info">
				<text>发布于 {{kbs.createtime_text}}</text>
				<view class="info-item">
					<u-icon name="eye" size="30"></u-icon> {{kbs.views}}
				</view>
				<view class="info-item">
					<u-icon name="thumb-up" size="30"></u-icon> {{kbs.likes}}
				</view>
			</view>
			<view class="content">
				<u-parse :html="kbs.content"></u-parse>
			</view>
			<view class="buttons">
				<u-button @click="kbsOperate('likes')" class="button-item" type="primary">有帮助 ({{kbs.likes}})</u-button>
				<u-button @click="kbsOperate('dislikes')" class="button-item" type="default">没有帮助 ({{kbs.dislikes}})</u-button>
			</view>
		</view>
		<view class="body">
			<view class="rec-title">推荐知识点</view>
			<block v-for="(item, index) in rec" :key="index">
				<block v-if="!item.url">
					<navigator open-type="redirect" :url="'/pages/workorder/kbs-info?id=' + item.id + '&category=' + category" class="kbs-item">{{index + 1}}. {{item.title}}</navigator>
				</block>
				<block v-else>
					<u-parse :html="item.html"></u-parse>
				</block>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				category: 0,
				kbs: {
					title: '加载中...',
					createtime_text: '',
					likes: 0,
					dislikes: 0
				},
				rec: []
			}
		},
		onLoad(query) {
			var that = this
			that.id = query.id ? query.id:0
			that.category = query.category ? query.category:0
			
			that.$u.api.kbsInfo({
				id: that.id,
				category: that.category
			}).then(res => {
				if (res.code == 1) {
					that.kbs = res.data.kbs
					for (let r in res.data.rec) {
						res.data.rec[r].html = res.data.rec[r].url ? '<a style="color:#303133;height: 60rpx;display: flex;align-items: center;padding: 10rpx;" href="' + res.data.rec[r].url + '"><span>' + (parseInt(r) + 1) + '.</span> ' + res.data.rec[r].title + '</a>':'';
					}
					that.rec = res.data.rec
					uni.setNavigationBarTitle({
						title: res.data.kbs.title
					})
				} else {
					that.$u.toast(res.msg);
				}
			}).catch(res => {
				that.$u.toast('请求失败，请重试！');
			})
		},
		methods: {
			kbsOperate: function (type) {
				var that = this, opeText = (type == 'likes' ? '赞':'踩'), id = that.id.toString()
				var kbsLikes = uni.getStorageSync('kbslikes');
				if (kbsLikes) {
					kbsLikes = kbsLikes.toString().split(',')
					if(kbsLikes.includes(id)) {
						that.$u.toast('您已经点' + opeText + '过了哦~');
						return false;
					}
				}
				that.$u.api.kbsOperate({
					id: id,
					type: type
				}).then(res => {
					if (res.code == 1) {
						that.$u.toast('点' + opeText + '成功~');
						that.kbs[type] = that.kbs[type] + 1
						var tempKbsLikes = ''
						if (kbsLikes) {
							for (let k in kbsLikes) {
								tempKbsLikes += kbsLikes[k] ? kbsLikes[k] + ',':''
							}
							tempKbsLikes += id + ','
						} else {
							tempKbsLikes = id + ','
						}
						uni.setStorageSync('kbslikes', tempKbsLikes)
					} else {
						that.$u.toast(res.msg);
					}
				}).catch(res => {
					console.log(res)
					that.$u.toast('请求失败，请重试！');
				})
			}
		}
	}
</script>

<style>
page {
	background: #F8F8F8;
}
.body {
	width: 94vw;
	margin: 0 auto 30rpx auto;
	background: #FFFFFF;
	border-radius: 16rpx;
	padding: 0 16rpx;
}
.title {
	display: block;
	height: 100rpx;
	line-height: 100rpx;
	font-size: 34rpx;
}
.info {
	display: flex;
	font-size: 28rpx;
	color: #999999;
}
.info-item {
	padding-left: 20rpx;
}
.content {
	font-size: 30rpx;
	padding-top: 20rpx;
}
.buttons {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40rpx 0;
}
.button-item {
	margin-right: 20rpx;
}
.rec-title {
	height: 80rpx;
	line-height: 80rpx;
	border-bottom: 1px solid #F8F8F8;
}
.kbs-item {
	height: 60rpx;
	display: flex;
	align-items: center;
	padding: 10rpx;
}
</style>
